<template>
  <div>
    <!--        搜索-->
    <div style="padding-bottom: 20px">
      <el-input v-model="serchinput" prefix-icon="el-icon-search" style="width: 50%;border-color: #409EFF;border-style: solid;border-radius: 4px"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="serch"></el-button>
    </div>
<!--    标签-->
    <el-row type="flex" justify="start">
      <el-col v-for="(i,k) in condition" :key="k" style="width: auto">
        <el-tag v-if="i!=''" closable @close="handleClose(k)">{{i}}</el-tag>
      </el-col>
    </el-row>
<!--    选项-->
    <el-row type="flex" style="background-color: white;margin-bottom: 3px">
      <el-col>
        <el-dropdown @command="handleCommand">
          <el-button type="text">
            薪资要求<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{x:'1',v:'3K-4K'}">3K-4K</el-dropdown-item>
            <el-dropdown-item :command="{x:'1',v:'4K-6K'}">4K-6K</el-dropdown-item>
            <el-dropdown-item :command="{x:'1',v:'6K-8K'}">6K-8K</el-dropdown-item>
            <el-dropdown-item :command="{x:'1',v:'10K-14K'}">10K-14K</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col>
        <el-dropdown @command="handleCommand">
          <el-button type="text">
            学历要求<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{x:'2',v:'高中'}">高中</el-dropdown-item>
            <el-dropdown-item :command="{x:'2',v:'本科'}">本科</el-dropdown-item>
            <el-dropdown-item :command="{x:'2',v:'大专'}">大专</el-dropdown-item>
            <el-dropdown-item :command="{x:'2',v:'研究生'}">研究生</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col>
        <el-dropdown @command="handleCommand">
          <el-button type="text">
            工作经验<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{x:'3',v:'无'}">无</el-dropdown-item>
            <el-dropdown-item :command="{x:'3',v:'1年以上'}">1年以上</el-dropdown-item>
            <el-dropdown-item :command="{x:'3',v:'3年以上'}">3年以上</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col>
        <el-dropdown @command="handleCommand">
          <el-button type="text">
            公司规模<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{x:'4',v:'50人'}">50人</el-dropdown-item>
            <el-dropdown-item :command="{x:'4',v:'100人'}">100人</el-dropdown-item>
            <el-dropdown-item :command="{x:'4',v:'300-500人'}">300-500人</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col>
        <el-button type="info" @click="cleartabs">清空条件</el-button>
      </el-col>
    </el-row>
<!--    排序方式-->
    <el-row type="flex" justify="start">
      <el-col style="width: auto">
        <el-button type="primary">默认排序</el-button>
      </el-col>
      <el-col style="width: auto">
        <el-button type="primary">最高薪资</el-button>
      </el-col>
      <el-col style="width: auto">
        <el-button type="primary">最新发布</el-button>
      </el-col>
    </el-row>
    <el-empty description="无该搜索结果" v-if="jobs.length==0"></el-empty>
<!--    职位列表-->
    <template v-for="job in jobs">
      <div :key="job.jobId">
        <el-card  shadow="hover" :body-style="{ padding:'0'}">
          <Job :jobinfo="job"></Job>
        </el-card>
      </div>
    </template>
<!--    分页-->
    <div style="background-color: white;height: 40px">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="5"
          @current-change="handleChange"
          style="float: right"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Job from "@/components/job";
import {requests} from "@/utils/request";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "jobs",
  components: {Job},
  data(){
    return{
      serchinput:'',
      pageTotal:1,
      jobs:[],
      condition:{
        salary:'',
        degree:'',
        exp:'',
        scale:'',
        input:''
      }
    }
  },
  watch:{
    condition:{
      handler(n,o){
        this.getpage(1)
      },
      deep:true
    }
  },
  mounted() {
    const t=this.$route.query.input
    if(t){
      this.condition.input=t
    }
    this.getpage(1);
  }
  ,
  methods:{
    //添加条件
    handleCommand(command){
      switch (command.x) {
        case '1':this.condition.salary=command.v;break;
        case '2':this.condition.degree=command.v;break;
        case '3':this.condition.exp=command.v;break;
        case '4':this.condition.scale=command.v;break;
      }

    },
    //清空选择条件
    cleartabs(){
      this.condition.degree=''
      this.condition.salary=''
      this.condition.exp=''
      this.condition.scale=''
    },
    //去掉条件
    handleClose(i){
      switch (i){
        case 'salary':this.condition.salary='';break;
        case 'degree':this.condition.degree='';break;
        case 'exp':this.condition.exp='';break;
        case 'scale':this.condition.scale='';break;
        case 'input':this.condition.input='';
      }
    },
    //选择页数
    handleChange(index){
      this.getpage(index)
    },
    //获取分页
    getpage(pagenum){
      requests.get("job/getpage/"+pagenum,{
        params:{
          salary:this.condition.salary,
          degree:this.condition.degree,
          exp:this.condition.exp,
          scale:this.condition.scale,
          input:this.condition.input
        }
      }).then((res)=>{
        this.pageTotal=res.data.data.total
        this.jobs=res.data.data.records
      })
    },
    serch(){
      this.condition.input=this.serchinput
    }
  }
}
</script>

<style scoped>
.el-dropdown .el-button{
  color: black;
}
</style>